<template>
  <div class="home-container">
    <!-- 顶部轮播图 -->
    <div class="carousel-wrapper">
      <el-carousel
        :interval="5000"
        height="100%"
        class="home-carousel"
        indicator-position="outside"
        :autoplay="true"
        arrow="hover"
      >
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <div class="carousel-content" :style="{ backgroundImage: `url(${item.image})` }">
            <div class="carousel-overlay">
              <div class="carousel-text">
                <div class="carousel-badge">
                  <el-icon><Star /></el-icon>
                  <span>{{ getCarouselBadgeText(item.type) }}</span>
                </div>
                <h2>{{ item.title }}</h2>
                <p>{{ item.description }}</p>
                <div class="carousel-actions">
                  <el-button
                    type="primary"
                    size="large"
                    @click="handleCarouselClick(item)"
                    class="carousel-btn primary"
                  >
                    <el-icon><ArrowRight /></el-icon>
                    了解更多
                  </el-button>
                  <el-button
                    size="large"
                    @click="$router.push('/booking')"
                    class="carousel-btn secondary"
                  >
                    <el-icon><Calendar /></el-icon>
                    立即预订
                  </el-button>
                </div>
              </div>
              <!-- 动态小圆点效果 -->
              <div class="carousel-decoration">
                <div class="decoration-circle"></div>
                <div class="decoration-dots">
                  <span v-for="i in 6" :key="i" class="dot"></span>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 快速统计 -->
    <div class="stats-section">
      <div class="stats-grid">
        <div class="stat-card available">
          <div class="stat-icon">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ availableTablesCount }}</div>
            <div class="stat-label">可用台球桌</div>
          </div>
          <div class="stat-decoration"></div>
        </div>

        <div class="stat-card busy">
          <div class="stat-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ busyTablesCount }}</div>
            <div class="stat-label">使用中</div>
          </div>
          <div class="stat-decoration"></div>
        </div>

        <div class="stat-card total">
          <div class="stat-icon">
            <el-icon><Grid /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ tables.length }}</div>
            <div class="stat-label">总台球桌</div>
          </div>
          <div class="stat-decoration"></div>
        </div>

        <div class="stat-card price">
          <div class="stat-icon">
            <el-icon><Money /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">¥{{ averagePrice }}</div>
            <div class="stat-label">平均价格/小时</div>
          </div>
          <div class="stat-decoration"></div>
        </div>
      </div>
    </div>

    <!-- 台球桌状态概览 -->
    <div class="section-header">
      <div class="section-title">
        <div class="title-icon">
          <el-icon><Grid /></el-icon>
        </div>
        <div class="title-content">
          <h2>台球桌状态</h2>
          <p>实时查看台球桌使用情况，选择您喜欢的台球桌</p>
        </div>
      </div>
      <div class="section-actions">
        <el-button
          type="primary"
          size="large"
          @click="$router.push('/booking')"
          class="action-btn"
        >
          <el-icon><Plus /></el-icon>
          预订台球桌
        </el-button>
      </div>
    </div>

    <div class="table-status-container">
      <div class="tables-grid">
        <div
          v-for="table in tables"
          :key="table.id"
          class="table-card"
          :class="[`status-${getStatusClass(table.status)}`]"
          @click="handleTableClick(table)"
        >
          <div class="table-header">
            <div class="table-type-icon">
              {{ getTableTypeIcon(table.table_type) }}
            </div>
            <div class="table-status-indicator">
              <div :class="['status-dot', getStatusClass(table.status)]"></div>
            </div>
          </div>

          <div class="table-content">
            <div class="table-title">
              <h3>{{ table.table_type }}</h3>
              <span class="table-number">{{ table.table_number }}</span>
            </div>

            <div class="table-status">
              <span :class="['status-text', getStatusClass(table.status)]">
                {{ table.status }}
              </span>
            </div>

            <div class="table-price">
              <span class="price-amount">¥{{ table.price_per_hour }}</span>
              <span class="price-unit">/小时</span>
            </div>
          </div>

          <div class="table-actions">
            <el-button
              v-if="table.status !== '维护中'"
              :type="table.status === '空闲' ? 'primary' : 'warning'"
              size="small"
              @click.stop="$router.push(`/booking?table_id=${table.id}`)"
              class="table-btn"
            >
              <el-icon v-if="table.status === '空闲'"><VideoPlay /></el-icon>
              <el-icon v-else><Clock /></el-icon>
              {{ table.status === '空闲' ? '立即预订' : '预订时段' }}
            </el-button>
            <el-button
              v-else
              type="info"
              size="small"
              disabled
              class="table-btn"
            >
              <el-icon><Tools /></el-icon>
              暂不可用
            </el-button>
          </div>

          <div class="table-decoration">
            <div class="decoration-pattern"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新活动与公告 -->
    <div class="section-header">
      <div class="section-title">
        <div class="title-icon">
          <el-icon><Bell /></el-icon>
        </div>
        <div class="title-content">
          <h2>最新活动与公告</h2>
          <p>了解最新优惠活动和重要公告信息</p>
        </div>
      </div>
      <div class="section-actions">
        <el-button
          link
          @click="showHistoryDialog = true"
          class="history-btn"
        >
          <el-icon><Clock /></el-icon>
          往期公告
        </el-button>
      </div>
    </div>

    <div class="activities-container">
      <div class="activities-grid">
        <div
          v-for="activity in activities"
          :key="activity.id"
          class="activity-card"
          :class="[`type-${activity.type}`]"
          @click="viewActivity(activity)"
        >
          <div class="activity-header">
            <div class="activity-type">
              <div class="type-icon">
                {{ getActivityIcon(activity.type) }}
              </div>
              <span class="type-text">{{ activity.typeText }}</span>
            </div>
            <div class="activity-date">
              <el-icon><Calendar /></el-icon>
              <span>{{ activity.publish_date }}</span>
            </div>
          </div>

          <div class="activity-content">
            <h3 class="activity-title">{{ activity.title }}</h3>
            <p class="activity-description">{{ activity.content }}</p>
          </div>

          <div class="activity-footer">
            <div class="activity-meta">
              <span class="meta-item">
                <el-icon><View /></el-icon>
                <span>查看详情</span>
              </span>
            </div>
            <div class="activity-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>

          <div class="activity-decoration">
            <div class="decoration-bg"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 往期公告对话框 -->
    <el-dialog
      v-model="showHistoryDialog"
      title="往期公告"
      width="800px"
      :before-close="handleHistoryClose"
    >
      <div class="history-content">
        <div class="history-filters">
          <el-input
            v-model="historySearchText"
            placeholder="搜索公告标题..."
            clearable
            style="width: 300px; margin-right: 10px;"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-select v-model="historyTypeFilter" placeholder="选择类型" clearable style="width: 150px;">
            <el-option label="全部" value="" />
            <el-option label="系统公告" value="notice" />
            <el-option label="活动公告" value="event" />
            <el-option label="维护公告" value="maintenance" />
            <el-option label="促销公告" value="promotion" />
          </el-select>
        </div>

        <div class="history-list">
          <div
            v-for="announcement in paginatedHistoryAnnouncements"
            :key="announcement.id"
            class="history-item"
            @click="viewActivity(announcement)"
          >
            <div class="history-item-header">
              <h4 class="history-title">{{ announcement.title }}</h4>
              <el-tag :type="getAnnouncementTypeColor(announcement.type)" size="small">
                {{ getAnnouncementTypeText(announcement.type) }}
              </el-tag>
            </div>
            <p class="history-content-text">{{ announcement.content }}</p>
            <div class="history-meta">
              <span class="history-time">{{ announcement.publish_date }}</span>
            </div>
          </div>

          <div v-if="filteredHistoryAnnouncements.length === 0" class="no-history">
            <el-empty description="暂无相关公告" />
          </div>
        </div>

        <!-- 分页 -->
        <div class="history-pagination" v-if="filteredHistoryAnnouncements.length > 0">
          <el-pagination
            v-model:current-page="historyCurrentPage"
            v-model:page-size="historyPageSize"
            :page-sizes="[5, 10, 20]"
            :total="filteredHistoryAnnouncements.length"
            layout="total, sizes, prev, pager, next"
            small
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import request from '../utils/request';
import { getTables } from '../api/table';
import { getAnnouncements, getLatestAnnouncements } from '../api/announcement';
import {
  Star,
  ArrowRight,
  Calendar,
  Check,
  User,
  Grid,
  Money,
  Plus,
  VideoPlay,
  Clock,
  Tools,
  Bell,
  View
} from '@element-plus/icons-vue';

//避免重复导入组件库图标
export default {
  name: 'HomeView',
  components: {
    Star,
    ArrowRight,
    Calendar,
    Check,
    User,
    Grid,
    Money,
    Plus,
    VideoPlay,
    Clock,
    Tools,
    Bell,
    View
  },

  setup() {
    const router = useRouter();
    // 轮播图数据 - 使用所有可用图片
    const carouselItems = ref([
      {
        id: 1,
        title: '会员充值优惠',
        description: '充值500元送100元，充值1000元送300元，更多优惠等你来享',
        image: require('../assets/swpier01.jpg'),
        type: 'promotion',
        activityId: 1
      },
      {
        id: 2,
        title: '新店开业大酬宾',
        description: '全场8折优惠，预订即送精美礼品一份，欢迎新老客户光临',
        image: require('../assets/swiper02.jpg'),
        type: 'activity',
        activityId: 2
      },
      {
        id: 3,
        title: '斯诺克精英赛',
        description: '周末斯诺克比赛火热进行中，冠军奖金1000元，亚军500元',
        image: require('../assets/swiper03.jpg'),
        type: 'event',
        activityId: 3
      },
      {
        id: 4,
        title: '夜场特惠时光',
        description: '晚上8点后享受6折优惠，夜猫子专属福利，畅玩到深夜',
        image: require('../assets/swiper04.jpg'),
        type: 'promotion',
        activityId: 4
      },
      {
        id: 5,
        title: '团体包场服务',
        description: '公司聚会、朋友聚餐首选，提供专业服务和精美茶点',
        image: require('../assets/swiper05.jpg'),
        type: 'notice',
        activityId: 5
      }
    ]);
    
    // 台球桌数据
    const tables = ref([]);
    
    // 活动公告数据
    const activities = ref([
      {
        id: 1,
        title: '国庆节营业时间调整公告',
        content: '国庆节期间（10月1日-7日）营业时间调整为上午10:00-凌晨2:00，请各位顾客相互转告。',
        type: 'notice',
        typeText: '公告',
        publish_date: '2023-09-25'
      },
      {
        id: 2,
        title: '会员日活动',
        content: '每月15日为会员日，会员消费享受7折优惠，非会员消费享受8折优惠。',
        type: 'activity',
        typeText: '活动',
        publish_date: '2023-09-10'
      },
      {
        id: 3,
        title: '斯诺克比赛报名',
        content: '本周末将举办斯诺克比赛，冠军奖金1000元，亚军奖金500元，季军奖金200元，欢迎报名参加。',
        type: 'event',
        typeText: '赛事',
        publish_date: '2023-09-05'
      }
    ]);

    // 往期公告相关数据
    const showHistoryDialog = ref(false);
    const historySearchText = ref('');
    const historyTypeFilter = ref('');
    const historyCurrentPage = ref(1);
    const historyPageSize = ref(10);
    const allHistoryAnnouncements = ref([]);
    
    // 获取台球桌数据
    const fetchTables = async () => {
      try {
        const response = await getTables();
        if (response.success) {
          const tablesData = response.data.items || response.data.tables || response.data;
          tables.value = tablesData.map(table => ({
            id: table.id,
            table_number: table.name,
            table_type: table.type,
            status: getStatusText(table.status),
            price_per_hour: parseFloat(table.hourly_rate) || 0
          }));
        } else {
          ElMessage.error(response.message || '获取台球桌状态失败');
        }
      } catch (error) {
        console.error('获取台球桌状态失败:', error);
        ElMessage.error('获取台球桌状态失败');
      }
    };

    // 状态文本转换
    const getStatusText = (status) => {
      const statusMap = {
        'available': '空闲',
        'occupied': '使用中',
        'maintenance': '维护中'
      };
      return statusMap[status] || status;
    };

    // 计算属性
    const availableTablesCount = computed(() => {
      return tables.value.filter(table => table.status === '空闲').length;
    });

    const busyTablesCount = computed(() => {
      return tables.value.filter(table => table.status === '使用中').length;
    });

    const averagePrice = computed(() => {
      if (tables.value.length === 0) return '0';
      const total = tables.value.reduce((sum, table) => {
        const price = parseFloat(table.price_per_hour) || 0;
        return sum + price;
      }, 0);
      const average = total / tables.value.length;
      return Math.round(average).toString();
    });

    // 获取轮播图徽章文本
    const getCarouselBadgeText = (type) => {
      const badgeMap = {
        'promotion': '优惠活动',
        'activity': '精彩活动',
        'event': '赛事公告',
        'notice': '重要公告'
      };
      return badgeMap[type] || '最新消息';
    };

    // 获取状态样式类
    const getStatusClass = (status) => {
      const classMap = {
        '空闲': 'available',
        '使用中': 'busy',
        '维护中': 'maintenance'
      };
      return classMap[status] || 'available';
    };

    // 获取台球桌类型图标
    const getTableTypeIcon = (type) => {
      const iconMap = {
        '斯诺克': '🎱',
        '美式8球': '🎯',
        '开伦': '⚪',
        'snooker': '🎱',
        'pool': '🎯',
        'carom': '⚪'
      };
      return iconMap[type] || '🎱';
    };

    // 获取活动图标
    const getActivityIcon = (type) => {
      const iconMap = {
        'system': '📢',
        'activity': '🎉',
        'maintenance': '🔧',
        'promotion': '🎁',
        'notice': '📋',
        'event': '🏆'
      };
      return iconMap[type] || '📢';
    };

    // 处理台球桌点击
    const handleTableClick = (table) => {
      if (table.status !== '维护中') {
        router.push(`/booking?table_id=${table.id}`);
      }
    };
    
    // 获取活动公告数据
    const fetchActivities = async () => {
      try {
        // 从后端API获取最新公告
        const response = await getLatestAnnouncements(6);
        if (response.success) {
          activities.value = response.data.map(activity => ({
            id: activity.id,
            title: activity.title,
            content: activity.content,
            type: activity.type,
            typeText: getActivityTypeText(activity.type),
            publish_date: activity.publish_time ?
              new Date(activity.publish_time).toLocaleDateString('zh-CN') :
              new Date(activity.created_at).toLocaleDateString('zh-CN')
          }));

          // 如果有高优先级公告，更新对应的轮播图内容
          const highPriorityActivities = response.data
            .filter(activity => activity.priority >= 7)
            .slice(0, 5); // 最多5个，对应5张轮播图

          if (highPriorityActivities.length > 0) {
            // 更新现有轮播图的内容，但保持图片不变
            highPriorityActivities.forEach((activity, index) => {
              if (index < carouselItems.value.length) {
                carouselItems.value[index] = {
                  ...carouselItems.value[index],
                  title: activity.title,
                  description: activity.content.length > 60 ?
                    activity.content.substring(0, 60) + '...' :
                    activity.content,
                  type: activity.type,
                  activityId: activity.id
                };
              }
            });
          }
        }
      } catch (error) {
        console.error('获取活动公告失败:', error);
        // 如果API失败，尝试从本地存储获取数据作为备用
        const storedActivities = localStorage.getItem('activities');
        if (storedActivities) {
          const allActivities = JSON.parse(storedActivities);
          activities.value = allActivities
            .filter(activity => activity.status === 'published')
            .slice(0, 6)
            .map(activity => ({
              id: activity.id,
              title: activity.title,
              content: activity.content,
              type: activity.type,
              typeText: getActivityTypeText(activity.type),
              publish_date: new Date(activity.publishTime).toLocaleDateString('zh-CN')
            }));
        }
      }
    };

    // 获取活动类型文本
    const getActivityTypeText = (type) => {
      const typeMap = {
        notice: '公告',
        event: '活动',
        maintenance: '维护',
        promotion: '优惠'
      };
      return typeMap[type] || '公告';
    };

    // 过滤后的往期公告
    const filteredHistoryAnnouncements = computed(() => {
      let filtered = allHistoryAnnouncements.value;

      if (historySearchText.value) {
        filtered = filtered.filter(item =>
          item.title.toLowerCase().includes(historySearchText.value.toLowerCase())
        );
      }

      if (historyTypeFilter.value) {
        filtered = filtered.filter(item => item.type === historyTypeFilter.value);
      }

      return filtered;
    });

    // 分页后的往期公告
    const paginatedHistoryAnnouncements = computed(() => {
      const start = (historyCurrentPage.value - 1) * historyPageSize.value;
      const end = start + historyPageSize.value;
      return filteredHistoryAnnouncements.value.slice(start, end);
    });

    // 获取公告类型颜色
    const getAnnouncementTypeColor = (type) => {
      const colorMap = {
        notice: 'info',
        event: 'success',
        maintenance: 'warning',
        promotion: 'danger'
      };
      return colorMap[type] || 'info';
    };

    // 获取公告类型文本
    const getAnnouncementTypeText = (type) => {
      return getActivityTypeText(type);
    };

    // 关闭往期公告对话框
    const handleHistoryClose = () => {
      showHistoryDialog.value = false;
      historySearchText.value = '';
      historyTypeFilter.value = '';
      historyCurrentPage.value = 1;
    };

    // 加载往期公告数据
    const loadHistoryAnnouncements = async () => {
      try {
        // 从后端API获取所有公告数据
        const response = await getAnnouncements({ pageSize: 100 });
        if (response.success) {
          allHistoryAnnouncements.value = response.data.announcements.map(activity => ({
            id: activity.id,
            title: activity.title,
            content: activity.content,
            type: activity.type,
            publish_date: activity.publish_time ?
              new Date(activity.publish_time).toLocaleDateString('zh-CN') :
              new Date(activity.created_at).toLocaleDateString('zh-CN')
          }));
        }
      } catch (error) {
        console.error('获取往期公告失败:', error);
        // 如果API失败，尝试从本地存储获取数据作为备用
        const storedActivities = localStorage.getItem('activities');
        if (storedActivities) {
          const allActivities = JSON.parse(storedActivities);
          allHistoryAnnouncements.value = allActivities
            .filter(activity => activity.status === 'published')
            .map(activity => ({
              id: activity.id,
              title: activity.title,
              content: activity.content,
              type: activity.type,
              publish_date: new Date(activity.publishTime).toLocaleDateString('zh-CN')
            }))
            .sort((a, b) => new Date(b.publish_date) - new Date(a.publish_date));
        }
      }
    };

    // 查看公告详情
    const viewActivity = (activity) => {
      router.push(`/announcement/${activity.id}`);
    };

    const handleCarouselClick = (item) => {
      // 如果轮播图关联了活动公告，跳转到公告详情页
      if (item.activityId) {
        router.push(`/announcement/${item.activityId}`);
      } else {
        // 否则根据类型跳转到相应页面
        if (item.title.includes('充值')) {
          router.push('/recharge');
        } else if (item.title.includes('比赛')) {
          router.push('/tournaments');
        } else if (item.title.includes('会员')) {
          router.push('/membership');
        } else {
          router.push('/booking');
        }
      }
    };

    onMounted(() => {
      fetchTables();
      fetchActivities();
      loadHistoryAnnouncements();
    });

    return {
      carouselItems,
      tables,
      activities,
      showHistoryDialog,
      historySearchText,
      historyTypeFilter,
      historyCurrentPage,
      historyPageSize,
      filteredHistoryAnnouncements,
      paginatedHistoryAnnouncements,
      availableTablesCount,
      busyTablesCount,
      averagePrice,
      viewActivity,
      handleCarouselClick,
      handleTableClick,
      getCarouselBadgeText,
      getStatusClass,
      getTableTypeIcon,
      getActivityIcon,
      getAnnouncementTypeColor,
      getAnnouncementTypeText,
      handleHistoryClose
    };
  }
};
</script>

<style scoped>
.home-container {
  padding: 24px;
  background: #f8fafc;
  min-height: 100vh;
}

/* 轮播图容器 */
.carousel-wrapper {
  margin-bottom: 40px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  width: 100%;
  height: 0;
  padding-bottom: 41.49%; /* 100 / 2.41 = 41.49% 实现2.41的宽高比 */
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.home-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.home-carousel :deep(.el-carousel__indicator) {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  width: 40px;
  height: 6px;
}

.home-carousel :deep(.el-carousel__indicator.is-active) {
  background: white;
}

.carousel-content {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.2) 100%
  );
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
}

.carousel-decoration {
  position: relative;
  z-index: 1;
}

.decoration-circle {
  width: 300px;
  height: 300px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  position: relative;
}

.decoration-dots {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.decoration-dots .dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: float 3s ease-in-out infinite;
}

.decoration-dots .dot:nth-child(2) {
  animation-delay: 0.5s;
}

.decoration-dots .dot:nth-child(3) {
  animation-delay: 1s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-10px); opacity: 1; }
}

.carousel-text {
  color: white;
  max-width: 600px;
  z-index: 2;
}

.carousel-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.carousel-text h2 {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.carousel-text p {
  font-size: 20px;
  margin-bottom: 32px;
  line-height: 1.6;
  opacity: 0.95;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.carousel-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.carousel-btn {
  padding: 14px 28px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px);
  border: none !important;
}

.carousel-btn.primary {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: white !important;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
}

.carousel-btn.primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6) !important;
}

.carousel-btn.secondary {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.carousel-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3) !important;
}

/* 统计区域 */
.stats-section {
  margin-bottom: 48px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat-card {
  background: white;
  border-radius: 20px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: rgba(102, 126, 234, 0.3);
}

.stat-card.available {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.stat-card.busy {
  background: linear-gradient(135deg, #ffffff 0%, #fef3f2 100%);
}

.stat-card.total {
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
}

.stat-card.price {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  margin-bottom: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-card.available .stat-icon {
  background: linear-gradient(135deg, #10b981, #059669);
}

.stat-card.busy .stat-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-card.total .stat-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.stat-card.price .stat-icon {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.stat-content {
  position: relative;
  z-index: 2;
}

.stat-number {
  font-size: 36px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 8px;
  line-height: 1;
}

.stat-label {
  font-size: 16px;
  color: #64748b;
  font-weight: 600;
}

.stat-decoration {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  opacity: 0.1;
}

.stat-card.available .stat-decoration {
  background: linear-gradient(135deg, #10b981, #059669);
}

.stat-card.busy .stat-decoration {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-card.total .stat-decoration {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.stat-card.price .stat-decoration {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

/* 区域标题 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 32px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 20px;
}

.title-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.title-content h2 {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.title-content p {
  font-size: 16px;
  color: #64748b;
  margin: 0;
}

.section-actions {
  display: flex;
  gap: 16px;
}

.action-btn {
  padding: 12px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
}

.action-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
}

/* 台球桌区域 */
.table-status-container {
  margin-bottom: 48px;
}

.tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.table-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.table-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: #667eea;
}

.table-card.status-available {
  border-left: 6px solid #10b981;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.table-card.status-busy {
  border-left: 6px solid #f59e0b;
  background: linear-gradient(135deg, #ffffff 0%, #fef3f2 100%);
}

.table-card.status-maintenance {
  border-left: 6px solid #ef4444;
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-type-icon {
  font-size: 32px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e2e8f0;
}

.table-status-indicator {
  position: relative;
}

.status-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: relative;
}

.status-dot.available {
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.status-dot.busy {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
}

.status-dot.maintenance {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}

.status-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.table-content {
  margin-bottom: 24px;
}

.table-title {
  margin-bottom: 16px;
}

.table-title h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.table-number {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

.table-status {
  margin-bottom: 16px;
}

.status-text {
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  display: inline-block;
}

.status-text.available {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.status-text.busy {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.status-text.maintenance {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.table-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 20px;
}

.price-amount {
  font-size: 24px;
  font-weight: 700;
  color: #059669;
}

.price-unit {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.table-actions {
  display: flex;
  justify-content: center;
}

.table-btn {
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  width: 100%;
}

.table-btn:hover {
  transform: translateY(-2px) !important;
}

.table-decoration {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  opacity: 0.05;
  pointer-events: none;
}

.decoration-pattern {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #667eea 0%, transparent 70%);
  border-radius: 50%;
}

.table-number {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.table-type {
  color: #606266;
  margin-bottom: 5px;
}

.table-status {
  font-weight: bold;
  margin-bottom: 5px;
}

.table-free .table-status {
  color: #67c23a;
}

.table-busy .table-status {
  color: #f56c6c;
}

.table-maintenance .table-status {
  color: #e6a23c;
}

.table-info {
  text-align: center;
  padding: 20px 15px;
}

.table-title {
  margin-bottom: 15px;
}

.table-type-main {
  font-size: 18px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 5px;
  line-height: 1.2;
}

.table-number-sub {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
  opacity: 0.8;
}

.table-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 12px;
}

.table-status-badge.空闲 {
  background-color: #f0f9ff;
  color: #67c23a;
  border: 1px solid #b3e19d;
}

.table-status-badge.使用中 {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fab6b6;
}

.table-status-badge.维护中 {
  background-color: #fdf6ec;
  color: #e6a23c;
  border: 1px solid #f5dab1;
}

.table-price {
  color: #e6a23c;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}

/* 活动区域 */
.activities-container {
  margin-bottom: 48px;
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
}

.activity-card {
  background: white;
  border-radius: 20px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.activity-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: #667eea;
}

.activity-card.type-system {
  border-left: 6px solid #3b82f6;
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
}

.activity-card.type-activity {
  border-left: 6px solid #10b981;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.activity-card.type-maintenance {
  border-left: 6px solid #f59e0b;
  background: linear-gradient(135deg, #ffffff 0%, #fef3f2 100%);
}

.activity-card.type-promotion {
  border-left: 6px solid #ef4444;
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.activity-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.type-icon {
  font-size: 20px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e2e8f0;
}

.type-text {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  background: #f1f5f9;
  padding: 4px 12px;
  border-radius: 8px;
}

.activity-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.activity-content {
  flex: 1;
  margin-bottom: 24px;
}

.activity-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px 0;
  line-height: 1.3;
}

.activity-description {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #667eea;
  font-weight: 500;
}

.activity-arrow {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  transition: all 0.3s ease;
}

.activity-card:hover .activity-arrow {
  transform: translateX(4px);
}

.activity-decoration {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  opacity: 0.05;
  pointer-events: none;
}

.decoration-bg {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #667eea 0%, transparent 70%);
  border-radius: 50%;
}

/* 往期公告样式 */
.history-btn {
  color: #667eea !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.history-btn:hover {
  color: #764ba2 !important;
  background: rgba(102, 126, 234, 0.1) !important;
}

.history-content {
  max-height: 600px;
}

.history-filters {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.history-list {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.history-item {
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.history-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-title {
  margin: 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
}

.history-content-text {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.history-time {
  color: #909399;
  font-size: 12px;
}

.no-history {
  text-align: center;
  padding: 40px 0;
}

.history-pagination {
  display: flex;
  justify-content: center;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tables-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .activities-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

@media (max-width: 768px) {
  .home-container {
    padding: 16px;
  }

  .carousel-overlay {
    padding: 0 32px;
    flex-direction: column;
    text-align: center;
  }

  .carousel-decoration {
    display: none;
  }

  .carousel-text h2 {
    font-size: 32px;
  }

  .carousel-text p {
    font-size: 18px;
  }

  .carousel-actions {
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .section-header {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
    padding: 24px;
  }

  .section-title {
    justify-content: center;
    text-align: center;
  }

  .section-actions {
    justify-content: center;
  }

  .tables-grid {
    grid-template-columns: 1fr;
  }

  .activities-grid {
    grid-template-columns: 1fr;
  }

  .title-content h2 {
    font-size: 24px;
  }

  .stat-number {
    font-size: 28px;
  }

  .stat-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .carousel-text h2 {
    font-size: 24px;
  }

  .carousel-text p {
    font-size: 16px;
  }

  .carousel-btn {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  .carousel-actions {
    flex-direction: column;
    align-items: center;
  }

  .title-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .title-content h2 {
    font-size: 20px;
  }

  .activity-title {
    font-size: 18px;
  }

  .table-title h3 {
    font-size: 18px;
  }
}
</style> 